<template>
  <div class="app-container">
    <div class="cardBox">
      <el-form :inline="true" class="search-form">
        <el-row style="display: flex; flex-wrap: wrap">
          <el-col :span="20">
            <el-form-item label="活动名称：">
              <el-input
                clearable
                placeholder="请输入名称"
                v-model="searchForm.keywords"
                maxlength="20"
                show-word-limit
                onkeyup="value =value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/g, '')"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="状态：">
              <el-select
                clearable
                v-model="searchForm.status"
                placeholder="请选择状态"
              >
                <el-option
                  v-for="item in [
                    { name: '结束', id: '-1' },
                    { name: '已开始', id: '1' },
                    { name: '已关闭', id: '2' },
                    { name: '进行中', id: '3' },
                  ]"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="text-align: right">
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="getListWay"
                >查询</el-button
              >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-refresh"
                @click="resetting"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="cardBox marginTop">
      <div class="marginBottom">
        <el-row :gutter="20">
          <el-col>
            <el-button
              icon="el-icon-circle-plus-outline"
              type="primary"
              size="small"
              @click="addWay"
              >添加活动</el-button
            >
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20">
        <el-col>
          <el-table
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            v-loading="loading"
            highlight-current-row
            :data="dataList"
            style="width: 100%"
          >
            <el-table-column align="center" prop="id" label="ID">
            </el-table-column>
            <el-table-column
              align="center"
              prop="activity_name"
              label="活动名称"
            >
            </el-table-column>
            <el-table-column align="center" prop="start_time" label="开始时间">
            </el-table-column>
            <el-table-column align="center" prop="end_time" label="结束时间">
            </el-table-column>
            <!-- <el-table-column align="center" prop="status" label="商品">
              <template slot-scope="scope">
                <el-button @click="lookGoodsWay(scope.row)" type="text"
                  >查看活动商品</el-button
                >
              </template>
            </el-table-column> -->
            <el-table-column align="center" prop="status" label="状态">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == -1" type="danger"
                  >活动结束</el-tag
                >
                <el-tag v-if="scope.row.status == 1" type="success"
                  >开启</el-tag
                >
                <el-tag v-if="scope.row.status == 2" type="warning"
                  >关闭</el-tag
                >
                <el-tag v-if="scope.row.status == 3" type="success"
                  >进行中</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              fixed="right"
              width="200"
              prop="address"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.status == 1 || scope.row.status == 3"
                  type="warning"
                  size="mini"
                  @click="saveStatus(scope.row)"
                >
                  关闭活动
                </el-button>
                <el-button
                  v-if="scope.row.status == 2"
                  type="success"
                  size="mini"
                  @click="saveStatus(scope.row)"
                >
                  开启活动
                </el-button>
                <el-button
                  style="margin-right: 10px"
                  type="primary"
                  size="mini"
                  @click="emitWay(scope.row)"
                >
                  修改
                </el-button>
                <el-popconfirm
                  title="这是一段内容确定删除吗？"
                  @confirm="delWay(scope.row)"
                >
                  <el-button type="danger" size="mini" slot="reference">
                    删除
                  </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row class="marginTop" style="text-align: right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="searchForm.page.count"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </div>
    <!-- <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="dialogVisible" width="800px"
            @close="handleClose">
            <el-row :gutter="20" v-loading="submitLoading">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
                    <el-col :span="24" class="splitTitle">
                        <div class="split">
                            活动信息
                        </div>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="活动名称" prop="activity_name">
                            <el-input placeholder="请输入活动名称" v-model="ruleForm.activity_name" maxlength="20" show-word-limit
                                onkeyup="value =value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/g, '')"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="状态" prop="status">
                            <el-radio-group v-model="ruleForm.status" size="mini">
                                <el-radio :label="1">开启</el-radio>
                                <el-radio :label="2">关闭</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="活动时间" prop="domeTime">
                            <el-date-picker @change="valueFormaChange" v-model="domeTime" type="datetimerange"
                                value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                            <el-popover placement="top-start" trigger="hover">
                                <p style="font-size: 12px;">当前创建的活动开始和结束时间</p>
                                <el-button type="text" slot="reference" style="color: inherit;margin: 0 10px;"
                                    icon="el-icon-info"></el-button>
                            </el-popover>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="最小值" prop="minimum_product_quantity">
                            <el-input placeholder="请输入累计商品最小值" v-model="ruleForm.minimum_product_quantity" maxlength="10"
                                show-word-limit onkeyup="value=value.replace(/\D/g,'')">
                                <template slot="append">
                                    <el-popover placement="top-start" trigger="hover">
                                        <p style="font-size: 12px;">累计购买关联活动商品的最小值</p>
                                        <p style="font-size: 12px;">该用用户满足最小值和小于最大值可以参与该活动</p>
                                        <el-button slot="reference" icon="el-icon-info"></el-button>
                                    </el-popover>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="最大值" prop="maximum_product_quantity">
                            <el-input placeholder="请输入累计商品最大值" v-model="ruleForm.maximum_product_quantity" maxlength="10"
                                show-word-limit onkeyup="value=value.replace(/\D/g,'')">
                                <template slot="append">
                                    <el-popover placement="top-start" trigger="hover">
                                        <p style="font-size: 12px;">累计购买关联活动商品的最大值</p>
                                        <p style="font-size: 12px;">该用用户满足最小值和小于最大值可以参与该活动</p>
                                        <el-button slot="reference" icon="el-icon-info"></el-button>
                                    </el-popover>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="转化时间" prop="domeTime">
                            <el-date-picker @change="valueFormaChange" v-model="domeTime" type="datetimerange"
                                value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                            <el-popover placement="top-start" trigger="hover">
                                <p style="font-size: 12px;">积分向提货券转化的时间段</p>
                                <el-button type="text" slot="reference" style="color: inherit;margin: 0 10px;"
                                    icon="el-icon-info"></el-button>
                            </el-popover>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="转化比例" prop="maximum_product_quantity">
                            <el-input placeholder="请输入转化比例" v-model="ruleForm.conversion_ratio" maxlength="10"
                                show-word-limit onkeyup="value=value.replace(/\D/g,'')">
                                <template slot="append">
                                    <el-popover placement="top-start" trigger="hover">
                                        <p style="font-size: 12px;">积分转提货券的转化比例,最大值为100</p>
                                        <p style="font-size: 12px;">输入100就是100%,50就是50%</p>
                                        <el-button slot="reference" icon="el-icon-info"></el-button>
                                    </el-popover>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="splitTitle">
                        <div class="split">
                            关联活动信息
                        </div>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="关联积分活动" prop="goods_ids">
                            <el-select multiple v-model="goods_ids" style="width: 90%;" filterable remote reserve-keyword
                                placeholder="关键字查询支持商品名、ID、副标题、编码" :remote-method="getGoodsListWay" :loading="goodsLoading">
                                <el-option v-for="item in GoodsList" :key="item.id" :label="item.name" :value="item.id" />
                            </el-select>
                            <el-popover placement="top-start" trigger="hover">
                                <p style="font-size: 12px;">当前转化活动所关联的活动,可多选</p>
                                <el-button type="text" slot="reference" style="color: inherit;margin: 0 10px;"
                                    icon="el-icon-info"></el-button>
                            </el-popover>
                        </el-form-item>
                    </el-col>



                </el-form>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </span>
        </el-dialog> -->

    <!-- <el-dialog :close-on-click-modal="false" title="查看商品" :visible.sync="goodsLookDialog" width="800px">
            <el-row :gutter="20">
                <el-table :header-cell-style="{
                    'background-color': '#f3f8fe',
                    color: '#606266',
                    height: '50px',
                }" v-loading="goodsLookLoading" highlight-current-row :data="GoodsDataList" style="width: 100%">
                    <el-table-column align="center" prop="id" label="id"> </el-table-column>
                    <el-table-column align="center" prop="name" label="商品名称"> </el-table-column>
                    <el-table-column align="center" prop="main_image" label="主图">
                        <template slot-scope="scope">
                            <el-image style="width: 50px;" v-if="scope.row.main_image" :src="scope.row.main_image" />
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="subtitle" label="副标题"> </el-table-column>
                </el-table>
            </el-row>
        </el-dialog> -->
  </div>
</template>

<script>
import {
  getConversionList,
  addConversion,
  editConversion,
  delConversion,
  editStatusRestitution,
  getConversionDetail,
} from "@/api/activity/agriculture";
import { getRegionList } from "@/api/user/index";
import { getActivityGoodsList } from "@/api/index";
import LogoUpload from "@/components/FileUpload";
export default {
  components: { LogoUpload },
  data() {
    return {
      loading: false,
      searchForm: {
        keywords: "",
        count: 10,
        page: 1,
      },
      dataList: [],
      total: 0,
      // 省市区列表
      regionList: [],
      title: "添加活动",
      dialogVisible: false,
      ruleForm: {
        id: "",
        activity_name: "",
        start_time: "",
        end_time: "",
        status: "",
        minimum_product_quantity: "",
        maximum_product_quantity: "",
        start_days: "",
        end_days: "",
        conversion_ratio: "",
        conversion: [],
      },
      submitLoading: false,
      goodsLookLoading: false,
      goodsLookDialog: false,
      GoodsDataList: [],
      disabledGoods: true,
    };
  },
  created() {
    getRegionList().then((res) => {
      this.regionList = res.data;
    });
    this.getListWay();
  },
  methods: {
    getListWay() {
      this.loading = true;
      getConversionList(this.searchForm)
        .then((res) => {
          this.loading = false;
          this.dataList = res.data.list;
          this.total = res.data.total;
        })
        .catch((err) => {
          this.loading = false;
          this.$messages.error(err.msg);
        });
    },
    resetting() {
      this.searchForm = {
        keywords: "",
        count: 10,
        page: 1,
      };
      this.getListWay();
    },
    addWay() {
      // this.$router.push('/activity/seckill/add')
      this.$router.push("/activity/convert/add");
      return;
      this.handleClose();
      this.title = "添加活动";
      this.dialogVisible = true;
    },
    delWay(row) {
      this.loading = true;
      delConversion({ id: row.id })
        .then(() => {
          this.$messages.success("删除成功");
          this.getListWay();
        })
        .catch((err) => {
          this.loading = false;
          this.$messages.error(err.msg);
        });
    },
    emitWay(row) {
      this.$router.push("/activity/convert/add?id=" + row.id);
      // this.dialogVisible = true
      // this.submitLoading = true
      // getConversionDetail({ id: row.id }).then((res) => {
      //     this.goods_ids = []
      //     res.data.goods_list.forEach((item) => {
      //         this.goods_ids.push(item.id)
      //     })
      //     this.GoodsList = []
      //     this.GoodsList.push(...res.data.goods_list)
      //     this.ruleForm.activity_name = res.data.activity_name
      //     this.ruleForm.status = res.data.status
      //     this.domeTime = [res.data.start_time, res.data.end_time]
      //     this.cascaderRegList = JSON.parse(res.data.area_ids_json)
      //     this.ruleForm.explain = res.data.explain
      //     this.ruleForm.consume_status = res.data.consume_status
      //     this.ruleForm.consume_price = res.data.consume_price
      //     this.ruleForm.consume_award_price = res.data.consume_award_price
      //     this.ruleForm.remark = res.data.remark
      //     this.ruleForm.id = res.data.id
      //     this.images = []
      //     var arr = res.data.image.split(',')
      //     arr.forEach((item) => {
      //         this.images.push({
      //             url: item,
      //         })
      //     })
      //     this.disabledGoods = false
      //     this.submitLoading = false
      //     this.$forceUpdate()
      // }).catch((err) => {
      //     this.submitLoading = false
      //     this.dialogVisible = false
      //     this.$messages.error(err.msg)
      // })
    },
    saveStatus(row) {
      var obj = {
        id: row.id,
        action: "conversion",
      };
      this.loading = true;
      editStatusRestitution(obj)
        .then((res) => {
          this.$messages.success(res.msg);
          this.getListWay();
        })
        .catch((err) => {
          this.$messages.error(err.msg);
          this.loading = false;
        });
    },
    valueFormaChange(val) {
      if (val !== null) {
        this.disabledGoods = false;
      } else {
        this.disabledGoods = true;
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var arr = [];
          this.images.forEach((item) => {
            arr.push(item.url);
          });
          this.ruleForm.start_time = this.domeTime[0];
          this.ruleForm.end_time = this.domeTime[1];
          this.ruleForm.image = arr.toString();
          this.ruleForm.goods_ids = this.goods_ids.toString();
          if (this.cascaderRegList.length !== 0) {
            this.ruleForm.area_ids_json = JSON.stringify(this.cascaderRegList);
          }
          addConversion(this.ruleForm)
            .then((res) => {
              this.handleClose();
              this.dialogVisible = false;
              this.submitLoading = false;
              this.$messages.success("操作成功");
              this.getListWay();
            })
            .catch((res) => {
              this.$messages.error(res.msg);
              this.submitLoading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClose() {
      this.ruleForm = {
        id: "",
        activity_name: "",
        status: 2,
        explain: "",
        consume_status: 0,
        consume_price: 0,
        consume_award_price: 0,
        remark: "",
        image: "",
        area_ids_json: "",
        start_time: "",
        end_time: "",
        goods_ids: [],
      };
      this.domeTime = [];
      this.cascaderRegList = [];
      this.images = [];
      this.goods_ids = [];
    },

    // 查看商品列表
    lookGoodsWay(row) {
      // this.goodsLookDialog = true
      // this.goodsLookLoading = true
      // getLoveFarmerGoodsList({ activity_id: row.id }).then((res) => {
      //     this.GoodsDataList = res.data
      //     this.goodsLookLoading = false
      // }).catch((err) => {
      //     this.goodsLookLoading = false
      //     this.goodsLookDialog = false
      //     this.$messages.error(err.msg)
      // })
    },
    handleSizeChange(val) {
      this.searchForm.count = val;
      this.getListWay();
    },
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.getListWay();
    },
    carouselBack() {},
  },
};
</script>

<style lang="scss" scoped></style>
<style>
.el-upload--picture-card {
  width: 90px !important;
  height: 90px !important;
  line-height: 90px;
}

.el-upload-list--picture-card .el-upload-list__item-actions {
  width: 90px !important;
  height: 90px !important;
}

.el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 90px !important;
  height: 90px !important;
}

.el-upload-list--picture-card .el-upload-list__item {
  width: 90px !important;
  height: 90px !important;
}

.tox .tox-dialog-wrap__backdrop {
  z-index: 9993 !important;
}

.tox-tinymce-aux {
  z-index: 9990 !important;
}

.tox .tox-dialog {
  z-index: 9995 !important;
}
</style>
